html {
	overflow-x: auto;
	overflow-y: scroll;
}
body {
    fill: currentColor;
}
dialog {
	border: 0;
}
.ui-table td:not(:first-child), .ui-table th:not(:first-child) {
    padding-left: 0;
}
.ui-table tr:hover td {
    background-color: #fff;
}
.search {
    padding: 10px;
    text-align: center;
    background-color: #f0f3f9;
    overflow: hidden;
}
.search .ui-search-input {
    max-width: 800px;
    margin: auto;
}
.title-sub {
    font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,Source Han Serif SC,STZhongsong,simsun,serif;
    font-size: 24px;
    margin: 30px 0 0;
    padding-bottom: 8px;
    border-bottom: solid #f0f3f9;
    opacity: .95;
}
.title-sub output:empty {
    display: none;
}
.title-sub output::before {
    content: '（';
}
.title-sub output::after {
    content: '）';
}

.button-import {
    width: 20px; height: 20px;
    vertical-align: -4px;
    margin-right: 5px;
}

.constr {
    width: 1680px;
    max-width: 100%;
    margin: auto;
}

.title-follow {
    position: relative;
}
.title-follow-btn {
    position: absolute;
    right: 0; bottom: 0;
    height: 40px;
    color: #666;
}
.title-follow-btn .ui-button {
    display: block;
    margin-top: -15px;
}

.icon-window-close {
	width: 30px; height: 30px;
	-ms-pointer-events: none;
    pointer-events: none;
}

.section-grid-x,
.section-grid-css {
    display: flex;
    flex-wrap: wrap;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, 72px);
    justify-content: space-between;
}
.section-grid-css {
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, 320px);
    margin-top: 20px;
}
.section:not([open]) .section-grid-x {
	display: none;
}
.section-grid-x .ui-loading {
    flex: 1;
    grid-column: 1 / 20;
}
.li-grid {
    width: 72px; height: 72px;
    margin-top: 10px;
    background-color: #f0f3f9;
    border-radius: 4px;
    color: inherit;
}

.li-grid:hover {
    color: inherit;
    box-shadow: 0 0 0 1px rgba(0,2,3, .2);
}
.li-grid > svg {
    display: block;
    margin: 14px auto;
    width: 48px; height: 48px;
    -ms-pointer-events: none;
    pointer-events: none;
}
.icon-a {
    display: inline-block;
    padding: 5px;
    color: #666;
}
.icon-a:hover {
	text-decoration: none;
}
.icon-a > svg {
    vertical-align: -3px;
    margin-right: 4px;
    width: 16px; height: 16px;
    -ms-pointer-events: none;
    pointer-events: none;
}
.result-preview-x {
    background-color: #fff;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}
.result-preview-svg {
    float: left;
    width: 128px;
    margin-right: 20px;
}
.result-preview-svg svg {
	display: block;
	width: 128px; height: 128px;
}
.result-color-li {
    margin-right: 20px;
    text-align: left;
}
.result-color-set {
	width: 340px;
	float: left;
	max-width: 100%;
    overflow: hidden;
}
.result-use-x {
	text-align: left;
	padding-left: 30px;
	border-left: 1px dashed #d0d0d5;
	overflow: hidden;
}
.result-table {
    box-shadow: none;
}
.result-table td {
	vertical-align: top;
}
.result-svg-view {
	position: absolute;
	width: 20px; height: 20px;
	right: 20px; top: 0; bottom: 0;
	margin: auto;
	background: no-repeat center;
	background-size: 100% 100%;
}
.result-svg-view svg {
	display: block;
	width: 100%; height: 100%;
}

.text-popup {
    animation: textPopup 1s;
    color: #01cf97;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}

.ui-lightip {
	left: 50%;
	transform: translateX(-50%);
}

@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}

textarea::-webkit-scrollbar{width:8px;height:8px}
textarea::-webkit-scrollbar-thumb{background-color:#bbb;border-radius:8px}
textarea::-webkit-scrollbar-thumb:hover{background-color:#aaa}
textarea::-webkit-scrollbar-track-piece{background-color:#ddd}


@media screen and (max-width: 480px) {
	.ui-table td, .ui-table th {
		padding: 0 10px;
	}
	.result-color-set {
		width: auto;
		float: none;
	}
	.result-use-x {
		padding-left: 0;
		border-left: 0;
	}
	.ui-dialog {
		min-width: 0;
	}
	.result-preview-x {
		padding-left: 10px; padding-right: 10px;
		padding-bottom: 10px;
	}
	.ui-dialog-body,
	.ui-dialog-title {
		padding-left: 16px; padding-right: 16px;
	}
	.ui-dialog-close {
		right: 13px;
	}
}

/* css.php */
.inline-style {
    display: block;
    overflow: hidden;
    background-color: #f0f3f9;
    font-size: 14px;
    font-family: "Lucida Console", Consolas, Monaco, monospace;
    white-space: pre-wrap;
    padding: 10px;
}
.inline-style mark {
    color: #f4615c;
    background-color: #fff;
}
.inline-style + .inline-style {
    margin-top: 10px;
}
.title-sub-first,
.title-sub-gather {
    display: inline-block;
    width: 320px;
    position: relative;
}
.title-sub-first::after {
    content: '';
    position: absolute;
    border-right: 20px solid #fff;
    height: 30px;
    top: 50%; right: -20px;
}
.title-sub-sp {
    display: flex;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, 320px);
    justify-content: space-between;
}

.css-grid-common {
    border-right: 0;
}
.css-grid-common style {
    background-color: #282923;
    color: #fff;
}
.css-commom-fs {
    position: absolute;
    right: 0;
    font-size: 14px;
    font-family: sans-serif;
}
.css-commom-fs select {
    opacity: 1;
    filter: none;
    border-right-width: 1px;
}
.css-icon-x,
.css-icon-x > i {
    width: 50px; height: 50px;
    border: 1px dotted;
    position: relative;
}
.css-icon-x p {
    margin-left: 60px;
    margin-top: 15px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}
.css-icon-x > i {
    position: absolute;
    border: 0;
    cursor: pointer;
}

.css-icon-x css-icon {
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 0;
    margin: auto;
    -ms-pointer-events: none;
    pointer-events: none;
}
.css-icon-ovh {
    display: none;
    overflow: hidden;
}
.css-icon-x:hover > i {
    background-color: #f5f7f9;
}
.css-grid[open] .css-icon-ovh {
    display: block;
}

.css-icon-ovh .inline-style {
    margin-top: 10px;
}

.icon-arrow-alt-circle-down {
    width: 18px; height: 18px;
    vertical-align: -4px;
    margin-right: 4px;
}


.dn{display:none}.di{display:inline}.db{display:block}.dtc{display:table-cell}.dib{display:inline-block}.lh14{line-height:14px}.lh16{line-height:16px}.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px}.lh28{line-height:28px}.m0{margin:0}.ml1{margin-left:1px}.ml2{margin-left:2px}.ml5{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml30{margin-left:30px}.mr1{margin-right:1px}.mr2{margin-right:2px}.mr5{margin-right:5px}.mr10{margin-right:10px}.mr15{margin-right:15px}.mr20{margin-right:20px}.mr30{margin-right:30px}.mt1{margin-top:1px}.mt2{margin-top:2px}.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mb1{margin-bottom:1px}.mb2{margin-bottom:2px}.mb5{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}.p0{padding:0}.p1{padding:1px}.pl1{padding-left:1px}.pt1{padding-top:1px}.pr1{padding-right:1px}.pb1{padding-bottom:1px}.p2{padding:2px}.pl2{padding-left:2px}.pt2{padding-top:2px}.pr2{padding-right:2px}.pb2{padding-bottom:2px}.pl5{padding-left:5px}.p5{padding:5px}.pt5{padding-top:5px}.pr5{padding-right:5px}.pb5{padding-bottom:5px}.p10{padding:10px}.pl10{padding-left:10px}.pt10{padding-top:10px}.pr10{padding-right:10px}.pb10{padding-bottom:10px}.p15{padding:15px}.pl15{padding-left:15px}.pt15{padding-top:15px}.pr15{padding-right:15px}.pb15{padding-bottom:15px}.p20{padding:20px}.pl20{padding-left:20px}.pt20{padding-top:20px}.pr20{padding-right:20px}.pb20{padding-bottom:20px}.p30{padding:30px}.pl30{padding-left:30px}.pt30{padding-top:30px}.pr30{padding-right:30px}.pb30{padding-bottom:30px}.bgwh{background-color:#fff}.wh{color:#fff}.f0{font-size:0}.f12{font-size:12px}.f13{font-size:13px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f20{font-size:20px}.f24{font-size:24px}.f28{font-size:28px}.fa{font-family:Arial}.fs{font-family:Simsun}.fw{font-family:'Microsoft Yahei'}.n{font-weight:400;font-style:normal}.b{font-weight:700}.i{font-style:italic}.tc{text-align:center}.tr{text-align:right}.tl{text-align:left}.tj{text-align:justify}.tdl{text-decoration:underline}.tdn,.tdn a:hover,.tdn:hover,a.tdl:hover{text-decoration:none}.lt-1{letter-spacing:-1px}.lt0{letter-spacing:0}.lt1{letter-spacing:1px}.nowrap{white-space:nowrap}.bk{word-wrap:break-word}.vm{vertical-align:middle}.vb{vertical-align:bottom}.vt{vertical-align:top}.vn{vertical-align:-5px}.l{float:left}.r{float:right}.cl{clear:both}.rel{position:relative}.abs{position:absolute}.zx1{z-index:1}.zx2{z-index:2}.poi{cursor:pointer}.def{cursor:default}.ovh{overflow:hidden}.ova{overflow:auto}.vh{visibility:hidden}.vv{visibility:visible}.clearfix:after,.fix:after{display:table;content:'';clear:both}.cell{display:table-cell;width:2000px}.ell{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.clip{position:absolute;clip:rect(0 0 0 0);*left:-99em}.auto{margin-left:auto;margin-right:auto}.middle{display:inline-block;width:0;height:100%;vertical-align:middle}.trans{-webkit-transition:all 250ms;transition:all 250ms}.unselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.disabled{opacity:.4;filter:alpha(opacity=40);cursor:default;-ms-pointer-events:none;pointer-events:none}
.dark{color:#4c5161}.blue,a.dark:hover{color:#2486ff}a:hover{color:#0057c3}.gray{color:#a2a9b6}.white{color:#fff}.green{color:#01cf97}.orange{color:#f28c48}.red{color:#f4615c}